<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表部门表</title>
    <meta name="keywords" content="列表部门表">
    <meta name="description" content="列表部门表">
    <link rel="shortcut icon" href="/web/favicon.ico">
    <link href="/web/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/web/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="/web/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=20210202" rel="stylesheet"/>
    <link href="/web/css/animate.min.css" rel="stylesheet"/>
    <link href="/web/css/style.css?v=20200903" rel="stylesheet"/>
    <link href="/web/andy/css/ry-ui.css?v=4.6.1" rel="stylesheet"/>
    <a id="scroll-up" href="javascript:void(0);" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
    <script src="/web/js/jquery.min.js"></script>
    <script src="/web/js/bootstrap.min.js"></script>
    <!-- bootstrap-table 表格插件 -->
    <script src="/web/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/web/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20210202"></script>
    <script src="/web/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
    <!-- jquery-validate 表单验证插件 -->
    <script src="/web/ajax/libs/validate/jquery.validate.min.js"></script>
    <script src="/web/ajax/libs/validate/messages_zh.min.js"></script>
    <script src="/web/ajax/libs/validate/jquery.validate.extend.js"></script>
    <!-- jquery-validate 表单树插件 -->
    <script src="/web/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
    <!-- 遮罩层 -->
    <script src="/web/ajax/libs/blockUI/jquery.blockUI.js"></script>
    <script src="/web/ajax/libs/iCheck/icheck.min.js"></script>
    <script src="/web/ajax/libs/layer/layer.min.js"></script>
    <script src="/web/ajax/libs/layui/layui.js"></script>
    <script src="/web/andy/js/common.js?v=4.6.1"></script>
    <script src="/web/andy/js/andy-ui.js?v=4.6.1"></script>
    <script src="/webjars/vue/2.6.14/vue.min.js"></script>
    <link href="/web/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet"/>
    <script src="/web/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>
</head>
<body class="gray-bg">
<div id="container">
    <div class="container-div" >
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="menu-form">
                    <div class="select-list">
                        <ul>
                            <li>
                                部门名称：<input type="text" name="deptName" value="" v-model="param.deptName"/>
                            </li>
                            <li>
                                状态：
                                <select  name="status" v-model="param.status">
                                    <option value="-1">全部</option>
                                    <option value="0">启用</option>
                                    <option value="1">禁用</option>
                                </select>
                            </li>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.treeTable.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" @click="add();">
                    <i class="fa fa-plus"></i> 新增
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-tree-table"></table>
            </div>
        </div>
    </div>

    <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="addForm" style="display: none">
        <form class="form-horizontal m" id="form-menu-add">
                        <input type="hidden" v-model="entity.deptId"/>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    选择父级部门
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.parentId" type="hidden"  class="form-control" name="parentId"  placeholder="父部门id">

                                    <div class="input-group">
                                        <input class="form-control" v-model="entity.parentName" type="text" placeholder="请选择所属部门" @click="selectDept();" readonly="true" >
                                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                    </div>

                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    部门名称
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.deptName" type="text"  class="form-control" name="deptName"  placeholder="部门名称">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    显示顺序
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.orderNum" type="text"  class="form-control" name="orderNum"  placeholder="显示顺序">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    负责人
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.leader" type="text"  class="form-control" name="leader"  placeholder="负责人">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    联系电话
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.phone" type="text"  class="form-control" name="phone"  placeholder="联系电话">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    邮箱
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.email" type="text"  class="form-control" name="email"  placeholder="邮箱">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    部门状态
                                </label>
                                <div class="col-sm-7" >
                                    <select class="form-control" name="status" v-model="entity.status">
                                        <option value="0">启用</option>
                                        <option value="1">停用</option>
                                    </select>
                                </div>
                            </div>



            </form>
    </div>
</div>
</body>
<script>
    var index2;
    let vm = new Vue({
        el:'#container',
        data:{
            datas:[],
            param:{
                visible:'',
                status:'-1'
            },
            entity:{
                parentName:'',
                parentId:'0',
                status: 0
            }
        },
        methods:{
            edit:function(){
                let rows = $("#bootstrap-table").bootstrapTable('getSelections');
                if ($.common.isEmpty(rows) || rows.length>1) {
                    $.modal.alertWarning("请最多选择一条记录");
                    return;
                }
                $.operate.getNoAlert('/system/dept/info/'+rows[0].roleId,function(ret){
                    let data = ret.data;
                    vm.entity=data;
                    $.operate.edit(0,'addForm',doSubmit);
                });

            },
            add:function(){
                vm.entity={};
                $.operate.edit(0,'addForm',doSubmit);
            },
            selectDept:function () {
                index2 = layer.open({
                    type: 2,
                    area: [ '400px','400px'],
                    fix: false,
                    //不固定
                    maxmin: true,
                    shade: 0.3,
                    title: '选择部门',
                    content: '/system/dept/toTree'

                });
            }
        },
        mounted(){
            init();
        }
    });

    function edit_(id){
        $.operate.getNoAlert('/system/dept/info/'+id,function(ret){
            let obj = ret.data;
            vm.entity=obj;
            if(obj.parent!=null){
                vm.entity.parentId=obj.parent.deptId;
                vm.entity.parentName = obj.parent.deptName;
            }
            $.operate.edit(0,'addForm',doSubmit);
        });

    }
    function deleteById(id){
        layer.confirm("确定删除当前部门吗？",function(){
            $.operate.delete('/system/dept/delete/'+id);
        });
    }
    function changeDept(deptId,deptName) {
        vm.entity.parentId=deptId;
        vm.entity.parentName = deptName;
    }
    function init(){
        var addFlag = false;
        addFlag=true;
        var editFlag = false;
        addFlag=true;
        var removeFlag = false;
        addFlag=true;
        var datas =[];
        let options={
            url:'/system/dept/data',
            sortable:false,
            code: "deptId",
            parentCode: "parentId",
            uniqueId: "deptId",
            expandAll: true,
            type:'1',
            expandFirst: true,
            modalName:'部门',
            columns:[
                {
                    checkbox : true,
                    field: 'selectItem',
                    width: '20px',
                    align : 'center'
                },
                    {
                        field:'deptName',
                        title:'部门名称',
                        align: 'center',
                        halign: 'center',
                        width: '25',
                        widthUnit: '%',
                        sortable:true
                    },
                    {
                        field:'orderNum',
                        title:'显示顺序',
                        align: 'center',
                        halign: 'center',
                        width: '8',
                        widthUnit: '%',
                        sortable:true
                    },
                    {
                        field:'leader',
                        title:'负责人',
                        align: 'center',
                        halign: 'center',
                        width: '8',
                        widthUnit: '%',
                        sortable:true
                    },
                    {
                        field:'phone',
                        title:'联系电话',
                        align: 'center',
                        halign: 'center',
                        width: '15',
                        widthUnit: '%',
                        sortable:true
                    },
                    {
                        field:'email',
                        title:'邮箱',
                        align: 'center',
                        halign: 'center',
                        width: '18',
                        widthUnit: '%',
                        sortable:true
                    },
                    {
                        field:'status',
                        title:'部门状态',
                        align: 'center',
                        halign: 'center',
                        width: '8',
                        widthUnit: '%',
                        sortable:true,
                        formatter:function (value,row,index) {
                            if(value==0){
                                return '<span class=\"label label-success\">启用</span>';
                            }
                            if(value==1){
                                return '<span class=\"label label-danger\">禁用</span>';
                            }
                        }
                    },
                    {
                        field:'delFlag',
                        title:'删除标志（0代表存在 2代表删除）',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        width: '8',
                        widthUnit: '%',
                        sortable:true
                    },
                    {
                        field:'createBy',
                        title:'创建者',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        width: '8',
                        widthUnit: '%',
                        sortable:true
                    },
                    {
                        field:'createTime',
                        title:'创建时间',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        width: '8',
                        widthUnit: '%',
                        sortable:true
                    },
                    {
                        field:'updateBy',
                        title:'更新者',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        width: '8',
                        widthUnit: '%',
                        sortable:true
                    },
                    {
                        field:'updateTime',
                        title:'更新时间',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        width: '8',
                        widthUnit: '%',
                        sortable:true
                    },
                {
                    title:'操作',
                    width:'100px',
                    align: 'center',
                    formatter:function (value,row,index){
                        let actions=[];
                        actions.push("<a href='javascript:void(0)' onclick=\"edit_('"+row.deptId+"')\" title=\"点击编辑部门表\"><i class=\"glyphicon glyphicon-edit\" aria-hidden=\"true\"></i></a>&nbsp;&nbsp;");
                        actions.push("<a href='javascript:void(0)' title='点击删除部门表' onclick=\"deleteById('"+row.deptId+"')\"><i class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\"></i></a>&nbsp;&nbsp;");

                        return actions.join("");
                    }
                }
            ]
        }
        $.treeTable.init(options);
    }


    function doSubmit(){
        if($("#form-menu-add").valid()){
            $.operate.post("/system/dept/save",JSON.stringify(vm.entity),function(ret){
                vm.entity={};
                layer.closeAll();
            });
        }
    }

    function close2() {
        layer.close(index2);
    }
</script>

<script>
    $(function(){
        var icon = "<i class='fa fa-times-circle'></i> ";
        formValidate = $("#form-menu-add").validate({
            rules:{
                deptId: "required" , 
                parentId: "required" , 
                ancestors: "required" , 
                deptName: "required" , 
                orderNum: "required" , 
                leader: "required" , 
                phone: "required" , 
                email: "required" , 
                status: "required"
            },
            messages:{
                deptId: icon + "必填" , 
                parentId: icon + "必填" , 
                ancestors: icon + "必填" , 
                deptName: icon + "必填" , 
                orderNum: icon + "必填" , 
                leader: icon + "必填" , 
                phone: icon + "必填" , 
                email: icon + "必填" , 
                status: icon + "必填"
            }
        })
    })
</script>

</html>
